<template>
   <div> 
   		<!-- 过渡效果 現有的元件先漸變離開結束後，新加入的元件再漸變進入 -->
		<transition name="router-fade" mode="out-in">
			<!-- 缓存页面 -->
			<keep-alive>	
				<router-view v-if="$route.meta.keepAlive"></router-view>
			</keep-alive>
		</transition>
		<transition name="router-fade" mode="out-in">
			<router-view v-if="!$route.meta.keepAlive"></router-view>
		</transition>
		<svg-icon></svg-icon>

   </div>
</template>

<script>
	import svgIcon from './components/common/svg';
   export default {
	   components: {
	   		svgIcon
	   },
 }
</script>

<style lang="scss">
@import './style/common';

 	//定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，以及在离开过渡被触发后立即生效 
 	.router-fade-enter-active, .router-fade-leave-active {
 		transition: opacity .3s;
 	}
 	// 定义进入过渡的开始状态。在元素被插入时生效
 	.router-fade-enter, .router-fade-leave-active {
 		opacity: 0
 	}
</style>

